{% extends "homestudent.html" %}

{% block studentcontent %}

    <p>Name: {{exam.name}}</p>
    <p>Description: {{ exam.description }}</p>
    <p>Deadline: {{ exam.deadline }}</p>
    <p>Teacher: {{ exam.author }}</p>
    <div class="meter animate">
        <span id="bar" style="width: {{ progress }}%"><span></span></span>
    </div>
    <form action="/StudentExam/{{ exam.id }}/" method="post">{% csrf_token %}
        {% for item in questions %}
            <p>{{ forloop.counter }}: {{ item.question}}</p>
            <ul>
            {% for item2 in item.answers %}
                <p>
                   {% if item2.id in answers%}
                        <input type="radio" id="{{item2.id}}" name="question{{ forloop.parentloop.counter }}"  value="{{ item2.id}}" checked="True" />{{ item2.answer }}
                        <label for="{{ item2.id }}" ></label>
                   {% else %}
                        <input type="radio" id="{{item2.id}}" name="question{{ forloop.parentloop.counter }}"  value="{{ item2.id}}" />{{ item2.answer }}
                        <label for="{{ item2.id }}" ></label>
                   {% endif %}
                </p>
            {% endfor %}
            </ul>
        {% endfor %}
        <input type="submit" value="Submit" name="submit" />
        <input id="progess" type="submit" value="Save" name="submit" />
    </form>
    <!-- þetta er úr prufu passar ekki við það sem eg er með... a eftir að finna út úr því -->
<script text="javascript">
    function check(id)
    {
        document.getElementById(id).checked=true
    }
    $(".meter > span").each(function() {
        $(this)
                .data("origWidth", $(this).width())
                .width(0)
                .animate({
                    width: $(this).data("origWidth")
                }, 1200);
    });


</script>
{% endblock %}

